<script setup lang="ts"></script>
<template>
  <div class="my-container">
    <div class="my-area my-row">
      <div class="my-col-md-12">
        <div class="navbar">
          <h1 class="logo_font">中国共产党建国史——大革命时期</h1>
          <div class="dropdown">
            <router-link to="/">主页</router-link>
          </div>
          <div class="dropdown">
            <router-link to="/GreatReselution">大革命战争综述</router-link>
          </div>
          <div class="dropdown">
            <router-link to="/Time">时间史</router-link>
          </div>
          <div class="dropdown">
            <router-link to="/biography" class="dropbtn">人物传记</router-link>
            <div class="subnav">
              <ul>
                <li><router-link to="/biography/ye-ting">叶挺</router-link></li>
                <li><router-link to="/biography/zhou-enlai">周恩来</router-link></li>
              </ul>
            </div>
          </div>
          <a href="filter/login" class="left">后台管理</a>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
@import '@/modules/moules1/modules1_BigRevelution/assets/main.css';
</style>
<style scoped>
/* 导航栏 */
/* 现有样式 */
.navbar {
  overflow: visible;
  position: relative;
  background-image: url('@/modules/moules1/modules1_BigRevelution/assets/101.jpg'); /* 设置背景图片 */
  background-size: cover; /* 覆盖整个元素 */
  background-position: center; /* 图片居中显示 */
  background-repeat: no-repeat; /* 不重复图片 */
}

.navbar a {
  /*float: left;*/
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-weight: bold;
  transition: box-shadow 0.3s ease;
  /*background-color: #333;*/
}

.navbar a:hover {
  background-color: white;
  color: #333;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); /* 悬停时添加阴影 */
  opacity: 0.5;
}

.navbar .left {
  /*float: right;*/
  margin: 0 0 0 150px;
}

/* 新增二级菜单样式 */
.dropdown {
  position: relative;
  float: left; /* 确保dropdown与其他菜单项对齐 */
}

.dropbtn {
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-weight: bold;
  transition: box-shadow 0.3s ease; /* 添加过渡效果 */
}

.dropbtn:hover {
  background-color: white;
  color: black;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); /* 悬停时添加阴影 */
  opacity: 0.5;
}

.subnav {
  display: none; /* 默认隐藏 */
  position: absolute;
  left: 0; /* 与父级对齐 */
  top: 100%; /* 下移至触发元素的底部 */
  /* background-color: white; */
  min-width: 160px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.9);
  /*border: 1px solid #23e44d;*/
  padding: 0;
}

.subnav ul {
  list-style-type: none;
  margin: 0;
  width: 100%;
}

.subnav ul li {
  padding: 12px 16px;
  text-align: center;
  margin: 0;
}

.subnav ul li a {
  /*color: #f2f2f2;*/
  color: #333;
  text-decoration: none;
  width: 100%;
  display: block;
  text-align: center;
  margin: 0;
}

.subnav ul li a:hover {
  background-color: rgba(255, 255, 255, 1);
  color: black;
}

/* 显示二级菜单 */
.dropdown:hover .subnav {
  display: block;
}
/*搜索栏和logo标签*/
.logodouble {
  background-color: red;
}
.logo_font {
  /*border: 1px solid #23e44d;*/
  display: inline;
  /* 设置字体为楷体 */
  font-family: 'KaiTi', 'KaiTi_GB2312', sans-serif;
  font-size: 2.5em;
  color: white;
  float: left;
  margin: 0;
  /*background-color: #333;*/
}
</style>
